.page-auto {
  height: 100%;

  .scroll-wrapper {
    height: 100%;
    padding: 0;
    background-color: $offWhite;

    .scroll-wrapper-inner {
      height: 100%;
      max-width: none;
    }
  }

  .hero-inner-wrapper {
    height: 100%;
    padding: 0;
    background: white;
  }

  .hero-image {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: white;
    max-width: none;
  }

  .hero .subheading {
    text-align: center;
    text-transform: uppercase;
    max-width: none;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 16px;

    @media screen and (min-width: $bp-medium) {
      font-size: 20px;
      letter-spacing: 10px;
    }
  }

  .hero-content {
    text-align: center;

    h1 {
      max-width: none;
      line-height: 0.9;
      color: $honey;

      .word {
        &:last-of-type {
          display: block;
        }
      }
    }

    .subheading {
      .word-animator {
        .word {
          white-space: normal;
          margin: 0 8px;
        }
      }
    }
  }

  .hero-down-indicator {
    left: calc(50% - 12px);
  }

  .feature-humanising-autonomy .featured-case-study-image img {
    max-width: 700px;
    max-height: none;
    width: 100%;
  }

  .auto-whatwedo {
    @include core-layout;
    background: white;

    .wrapper {
      @include core-vertical-padding-large;
    }
  }

  .sub-content-sections-item-image {
    height: 75px;

    @media screen and (min-width: $bp-medium) {
      height: 85px;
    }
    @media screen and (min-width: $bp-larger) {
      height: 85px;
    }
  }

  .sub-content-sections {
    background-color: white;
    margin-bottom: 0;
  }

  .testimonial-carousel:not(.twitterAuto) {
    background-image: linear-gradient(212deg, #304178, #313132);

    p {
      color: $honey;
    }
  }

  .card-list {
    @include core-vertical-padding;
  }

  .testimonial-smallprint {
    color: $offWhite;
  }

  .tesimonial-button-next svg {
    fill: white;
  }

  @media screen and (min-width: $bp-large) {
    .auto-how {
      // padding-bottom: 48%; // Reduce this because we reduced the width below

      .video-block {
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

  .video-block {
    margin-bottom: 30px;

    &:after {
      content: "";
      position: absolute;
      width: 30px;
      height: 30px;
      bottom: -35px;
      left: -30px;
      background: url('/images/icon-diagonal-arrow.svg') no-repeat top right;
      background-size: 100% auto;
    }

    @media screen and (min-width: $bp-large) {
      margin-bottom: 70px;

      &:after {
        width: 70px;
        height: 70px;
        bottom: -80px;
        left: -80px;
      }
    }
  }
}

.active .hero-content h1 .word-animator:before {
  opacity: 1;
}

.work-vertical-auto-hmi {
  background-image: url('/images/work/expertise-image-mobility-small.jpg');

  @media screen and (min-width: $bp-medium) {
    background-image: url('/images/work/expertise-image-mobility.jpg');
  }
}

.work-vertical-auto-mobility {
  vertical-align: top;
  background-image: url('/images/auto/auto-mobility.png');
}

.work-vertical-auto-reimagine {
  vertical-align: top;
  background-image: url('/images/auto/auto-reimagine.jpg');
}

.auto-how {
  @include core-layout;
  background: white url(/images/pattern-donut.svg) no-repeat top right;
  background-size: 100px auto;

  @media screen and (min-width: $bp-large) {
    background-size: 200px auto;
  }

  .auto-how-inner {
    @include core-vertical-padding;

    > p {
      @include thinner-content;
      margin-bottom: 20px;

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

.page-auto .events-list,
.auto-team {
  .header {
    @extend .h3;
  }
}

.page-auto .events-list {
  .header {
    margin-bottom: 60px;
    text-align: center;
  }
}

.auto-team {
  @include core-layout;
  background-image: linear-gradient(212deg, $auto, $honey);
  text-align: center;

  .auto-team-inner {
    @include core-vertical-padding;

    > p {
      @include thinner-content;
      text-align: left;
    }

    li {
      list-style-type: none;

      @media screen and (min-width: $bp-large) {
        margin: 0 20px;
      }
    }
  }
}

.auto-team-profiles {
  @include core-vertical-padding($withChildren: true);
  display: flex;
  flex-direction: column;

  li {
    clear: left;
  }

  @media screen and (min-width: $bp-medium) {
    display: flex;
    flex-direction: row;
    justify-content: center;
    @include thinner-content;
    justify-content: space-around;
    margin: 0 auto;
  }
}

// TODO: Make this a component

.profile {
  display: flex;
  text-align: left;

  @media screen and (min-width: $bp-medium) {
    display: block;
  }

  a {
    text-decoration: underline;
  }
}
.profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background-color: #ddd;
  float: left;
  margin-right: 20px;
  overflow: hidden;

  @media screen and (min-width: $bp-medium) {
    margin: 0 auto;
  }

  img {
    width: 100%;
    height: auto;
  }
}
.profile-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile-name {
  margin-bottom: 5px;
  font-family: $PxGroteskBold;
  text-transform: none;
  font-size: 18px;
}
.profile-title {
  list-style: none;
  text-transform: uppercase;
  color: $veryDarkGrey;
}
.profile-contact {
  margin-top: 10px;
  font-size: 16px;
}

@media screen and (min-width: $bp-medium) {
  .profile {
    width: 184px;
    text-align: center;
  }
  .profile-photo {
    margin: 0 auto 20px auto;
    float: none;
  }
  .profile-contact {
    margin-top: 20px;
  }
}

div[class*="auto-logos-wrapper"] {
  @extend .work-clients-board;
  flex-direction: column;

  .work-clients-board {
    padding-top: 0;
    padding-bottom: 0;

    ul {
      justify-content: flex-start;

      li {
        img {
          opacity: 1;
        }
      }

      @media screen and (min-width: $bp-larger) {
        li {
          width: 20%;
        }
      }
    }
  }
}

.auto-logos-wrapper-clients {
  background-image: linear-gradient(212deg, $auto, $honey);

  .work-clients-board h5 {
    color: black;
  }
}

.auto-logos-wrapper-partners {
  background-image: linear-gradient(212deg, #304178, #313132);

  .work-clients-board h5 {
    color: white;
  }
}
